<template>
  <div>
    <el-form ref="deptForm" :model="form" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
     		<el-option v-for="item in list" :key="item.id" :value="item.username" :label="item.username" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
import {getEmployeesSimple,addDepartments,editDepartments,getDepartmentsDetail} from '@/api/departments'
export default {
    props:{
    originList:{
      type:Array,
      required:true
    },
    id:{
      type:String,
      required:true
    },
    isEdit:{
      type:Boolean,
      required:true
    }
  },
  data() {
         const existCodeValid = (rule,value,callback)=>{ 
         let existCodeList = this.originList.map(item=>item.code)
         if(this.isEdit) {
          existCodeList = this.originList.filter(item=>item.id !== this.id).map(item=>item.code)
         }
         console.log(existCodeList,'existCodeList')
         if(existCodeList.includes(value)) {
          //存在,校验失败
          callback(new Error(`部门编码${value}已存在`))
         }else {
          callback()
         }}
         
         const existNameValid = (rule,value,callback) =>{
           let existNameList= this.originList.filter(item=>item.id !== this.id).map(item=>item.name)
         console.log(existNameList,'existNameList')   
         if(this.isEdit){
          const pid = this.originList.find(item => item.id === this.id).pid // 根据this.id获取当前对象的pid
          const brothers = this.originList.filter(item => item.pid === pid) // 找到所有兄弟包括自己
          existNameList = brothers.filter(item => item.id !== this.id).map(item=> item.name)
         }
         if(existNameList.includes(value)) {
          //存在,校验失败
          callback(new Error(`部门名称:${value}已存在`))
         }else {
          callback()
         }
         }
         
  return {
      form:{
      name:'',
      code:'',
      manger:'',
      introduce:''
    },
    // 校验规则
    rules:{
      name:[
        {required:true, message:'请输入部门名称',trigger:'blur'},
        {min:1,max:50, message:'请输入长度是1-50的部门名称',trigger:'blur'},
        {validator:existNameValid,trigger:'blur'}

      ],
       code:[
        {required:true, message:'请输入部门编码',trigger:'blur'},
        {min:1,max:50, message:'请输入长度是1-50的部门编码',trigger:'blur'},
        {validator:existCodeValid,trigger:'blur'}
      ],
       manager:[
        {required:true, message:'请输入部门负责人',trigger:['blur','change']}
      ],
       introduce:[
        {required:true, message:'请输入部门的介绍',trigger:'blur'},
        {min:1,max:300, message:'请输入长度是1-300的部门介绍',trigger:'blur'}
      ]
    },
    list:[] //保存部门负责人
    }
    },
created() {
  this.loadEmployeesSimple()
  if(this.isEdit) {
    this.loadDepartmentsDetail()
  }
},
methods:{
  //清空表单数据
  resetForm(){
    this.$refs.deptForm.resetFields()
  },
  //加载部门详情数据
  async loadDepartmentsDetail(){
      try{
        const res = await getDepartmentsDetail(this.id)
        console.log(res,'getDepartmentsDetail')
        this.form = res.data
      }catch(error){
       console.log(error)
      }
  },
  async loadEmployeesSimple(){
    try {
       const res = await getEmployeesSimple()
       console.log(res,'getEmployeesSimple')
       this.list = res.data
    }catch(error){
      console.log(error)
    }
   
  },
  async doAdd(){
    try{
    const res = await addDepartments({...this.form,pid:this.id})
     console.log(res,'addDepartments')
     this.$emit('success')
    }catch(error){
      console.log(error)
    }
  },
  async doEdit(){
    try{
      const res =await editDepartments(this.form)
      console.log(res,'editDepartments')
     this.$emit('success')
      }catch(error){
      console.log(error)
      }
  },
hSubmit(){
  this.$refs.deptForm.validate((valid)=>{
    if(!valid) return
     this.isEdit ? this.doEdit() : this.doAdd()
  })

},
hCancel(){
  this.$emit('close')
}
}
}




</script>

<style>

</style>
